<template>
  <transition name="translate">
    <div class="sale-wrap">
      <common-back :content="title"></common-back>
      <div class="container">
        <div class="title">反馈信息</div>
        <div class="text-wrap">
          <textarea class="textarea"
                    placeholder="请输入反馈内容"
                    v-model="value"></textarea>
        </div>
      </div>
      <common-button :content="content"
                     @submit="handleSumit"></common-button>
    </div>
  </transition>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonButton from 'common/button/button'
export default {
  name: 'feebback',
  components: {
    CommonBack,
    CommonButton
  },
  data () {
    return {
      title: '问题反馈',
      content: '提交',
      value: ''
    }
  },
  methods: {
    handleSumit () {
      if (this.value === '') {
        this.$tip('内容为空')
        return false
      }
      this.feedback()
    },
    feedback () {
      this.$api.me.feedback({ content: this.value })
        .then(this.feedbackSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    feedbackSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$tip(res.msg)
        setTimeout(() => {
          this.$router.push('/')
        }, 2000)
      } else if (res.code === this.$api.CODE_ERR) {
        this.$tip(res.msg)
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.sale-wrap
  initPosition()
  background-color $common_bgc
  padding-top 88px
  z-index 20

  .container
    .title
      text-indent 22px
      font-size $shop_name
      line-height 92px
      margin-bottom 10px
      font-weight 400
      color $footer_bgc

    .text-wrap
      width 100%
      padding()

      .textarea
        width 100%
        height 307px
        background-color $space
        padding()
        padding-top 26px
        padding-bottom 26px
        font-size $shop_name
        line-height 40px
        font-weight 400
        color $footer_bgc
        resize none
        border none

.translate-enter-active, .translate-leave-active
  transition all 0.3s

.translate-enter, .translate-leave-active
  transform translate3d(100%, 0, 0)
</style>
